<template>
  <div class="page_goods" id="goods_details">
    <div class="warp">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-10">
            <div class="pr-md-2">
              <div class="card_div_goods">
                <div_goods :obj="obj" :list_img="list_img"></div_goods>
              </div>

              <div class="card_bottom_goods">
                <div class="options pl-3">
                  <span
                    @click="selected_index = 1"
                    :class="{ selected: selected_index === 1 }"
                    >详情</span
                  >
                  <span
                    @click="selected_index = 2"
                    :class="{ selected: selected_index === 2 }"
                    >评论</span
                  >
                </div>
                <div v-if="selected_index === 2" class="comment_box">
                  <list_comment
                    class="w-100"
                    :list="list_comment"
                  ></list_comment>
                  <!-- 分页器 -->
                  <b-pagination-nav
                    :base-url="$route.path"
                    :number-of-pages="count_pages"
                    :link-gen="link_gen"
                    @change="change_page"
                    first-number
                    last-number
                  ></b-pagination-nav>

                  <div class="form_editor">
                    <form_editor
                      :form="form_comment"
                      @update_comment="update_comment"
                    ></form_editor>
                  </div>
                </div>

                <div v-else>商品详情</div>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-2">
            <div class="card_aside">
              <h5>今日推荐</h5>
              <list_goods_hot :list="list_hot"></list_goods_hot>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../../mixins/page.js";
import list_goods_hot from "../../components/diy/list_goods_hot.vue";
import list_comment from "../../components/diy/list_comment.vue";
import div_goods from "../../components/diy/div_goods.vue";
import form_editor from "../../components/diy/form_editor.vue";
export default {
  mixins: [mixin],
  components: {
    list_comment,
    list_goods_hot,
    div_goods,
    form_editor,
  },
  data() {
    return {
      url_get_obj: "~/api/goods/get_obj?",
      query: {
        goods_id: 0,
      },
      list_comment: [],
      // obj: { img_1: "", img_2: "", img_3: "", img_4: "" },
      list_hot: [],
      selected_index: 2,
      form_comment: {
        source_table: "goods",
        source_field: "goods_id",
        source_id: 0,
      },
      // 页面数
      count_pages: 1,
      // 是否设置过
      seted_count_pages: true,
      obj: {
        goods_id: 0,
        title: "",
        img: "",
        description: "",
        price_ago: 0,
        price: 0,
        sales: 0,
        inventory: 0,
        type: "",
        hits: 0,
        content: null,
        create_time: "2021-02-20 20:48:07",
        update_time: "2021-03-30 17:48:07",
        img_1: "",
        img_2: "",
        img_3: "",
        img_4: "",
        img_5: "",
        source_table: "",
        source_field: "",
        source_id: 0,
        num_buy: 1,
      },
    };
  },
  methods: {
    get_obj_after(json) {
      var obj = json.result.obj;
      this.get_comment(obj);
      obj.num_buy = 1;
      this.form_comment.source_id = obj.goods_id;
    },
    // 获取评论
    get_comment(obj, page = 1, size = 5) {
      // 分页器
      this.$get(
        "~/api/comment/get_list?",
        {
          source_table: "goods",
          source_field: "goods_id",
          source_id: obj.goods_id,
          page,
          size,
          orderby: "create_time desc",
        },
        (json) => {
          if (json.result) {
            var list_comment = json.result.list;
            this.list_comment = list_comment;
            // 分页器
            if (this.seted_count_pages) {
              this.seted_count_pages = false;
              this.count_pages = Math.ceil(json.result.count / size);
            }
          }
        }
      );
    },
    // 获得热门商品
    get_hot_goods() {
      this.$get(
        "~/api/goods/get_list",
        {
          page: 1,
          size: 5,
          orderby: "hits",
        },
        (res) => {
          if (res.result) {
            this.list_hot = res.result.list;
          }
        }
      );
    },
    update_comment() {
      this.get_comment(this.obj);
    },
    // 分页器
    link_gen(page_num) {
      return {
        query: this.query,
      };
    },
    change_page(page_num) {
      this.get_comment(this.obj, page_num);
    },
  },
  computed: {
    // 获得图片列表
    list_img() {
      var { img_1, img_2, img_3, img_4 } = this.obj;
      var list_img = [];
      if (img_1) {
        list_img.push(img_1);
      }
      if (img_2) {
        list_img.push(img_2);
      }
      if (img_3) {
        list_img.push(img_3);
      }
      if (img_4) {
        list_img.push(img_4);
      }
      return list_img;
    },
  },
  mounted() {
    this.get_hot_goods();
  },
};
</script>

<style scoped>
.card_bottom_goods {
  margin-top: 60px;
  padding: 5px;
  border: 1px solid #eee;
}
.options {
  font-size: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.options span {
  cursor: pointer;
  padding-right: 40px;
  font-weight: 600;
}
.options span.selected {
  color: var(--color_primary);
}
.options span:hover {
  color: var(--color_primary);
}
.form_editor {
  padding: 10px;
}
.comment_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
